let flag = true //初始时默认为可抽奖状态
let ranNameList = [] //随机使用的名单//随机使用的名单
let time = null //全局定时器
let value = '' //被选中的人名
let isRandomNames = [] //记录当前已抽到过的人名
let classid = 0 //选择的班级id
let avatar = './img/avatar/default/' //默认头像src
// 读取测试
var wb; //读取
var rABS = false;
let classGroup = JSON.parse(localStorage.getItem('classGroup')) || []
let ranClassNameList = JSON.parse(localStorage.getItem('ranClassNameList')) || []

let zjTimer = null //中奖效果定时器

// 循环渲染班级的方法
function forEachClass() {
    $('.dropdown-menu').html('')
    for (let i = 0; i < classGroup.length; i++) {
        $('.dropdown-menu').append(`<li class="item" data-classid=${i}><a href="javascript:;">${classGroup[i]}</a></li>`)
    }
    if (classGroup.length > 0) {
        $('.resultBox').html(`当前已导入${classGroup.length}个班级学生信息`)
    } else {
        $('.resultBox').html(`当前无班级学生信息，请先导入`)
    }

}
forEachClass()

/**
 *点击随机抽取名字
 */
$("#move").click(function () {
    if (flag) {
        if (ranNameList.length <= 0) {
            alert('当前已无可抽奖学生，请先选择班级或清空记录')
            return
        }
        if (ranNameList.length == 1) {
            $(".randomBox .name").css({
                color: "#016dfc"
            }).html(ranNameList[0].name);
            // 有头像显示头像
            if (ranNameList[0].avatar != '') {
                $('.randomBox .avatar').css({
                    display: 'inline-block'
                }).attr('src', ranNameList[0].avatar)
            } else {
                const random =Math.floor(Math.random() * 11)+1
                $('.randomBox .avatar').css({
                    display: 'inline-block'
                }).attr('src', `${avatar}${random}.jpg`)
            }
            alert('当前只剩最后一个学生，天选之子已定！')
            $(this).css({
                color: "#fff"
            }).html("开启抽奖");
            $(".randomBox .name").css({
                color: "#56c5ff"
            });
            clearInterval(time);
            $('.randomBox .crown').css({
                opacity: '0.9'
            })
            value = ranNameList[0].name;
            // 将已抽取的人名信息从数组中删除
            ranNameList.splice(0, 1)
            // 记录姓名
            savaName()
            return
        }
        $(this).css({
            color: "#286090"
        }).html("停止点名");

        // 清除中奖效果及定时器
        clearZJ()

        //每30毫秒执行一次
        time = setInterval(() => {
            index = Math.floor(Math.random() * ranNameList.length);
            //选中的人名
            value = ranNameList[index].name;
            $(".randomBox .name").css({
                color: "#016dfc"
            }).html(value);
            // 有头像显示头像
            // 服务端方法checkAvatar(ranNameList[index].avatar)
            if (ranNameList[index].avatar) {
                $('.randomBox .avatar').css({
                    display: 'inline-block'
                }).attr('src', ranNameList[index].avatar)
            } else {
                const random =Math.floor(Math.random() * 11)+1
                $('.randomBox .avatar').css({
                    display: 'inline-block'
                }).attr('src', `${avatar}${random}.jpg`)
            }
        }, 30);
        //取反
        flag = !flag;
    } else {
        $(this).css({
            color: "#fff"
        }).html("开启抽奖");
        $(".randomBox .name").css({
            color: "#56c5ff"
        });
         // 显示中奖效果
        //  $('.randomBox .crown').css('opacity','0.9')
        zjTimer = setInterval(isMeTimer,350)
        $('.randomBox').css({background:'url(./img/fireworks.gif)'})

        clearInterval(time)
        // 将已抽取的人名信息从数组中删除
        ranNameList.splice(index, 1)
        // 记录姓名
        savaName()
        flag = !flag;
    }
});

// 添加下拉列表切换班级事件
$('.dropdown-menu').on('click', '.item', function (e) {
    classid = this.dataset.classid
    $('#dropdownMenu1').html(`${classGroup[this.dataset.classid]}<span class="caret"></span>`)
    $(".randomBox .name").css('color','#fff').html(`切换 ${classGroup[this.dataset.classid]} 成功`);
    // 学生信息绑定为新班级成员
    ranNameList = ranClassNameList[classid]
    $('.randomBox .avatar').css({
        display: 'none'
    }).attr('src', './img/avatar/default.jpg')
    clearZJ()
})

// 没有班级信息时提示导入
$('#dropdownMenu1').on('click', function (e) {
    if (!flag) {
        alert('请先停止抽奖')
        return false
    }
    if (classGroup.length <= 0) {
        alert('请先导入班级和学生信息')
        return false
    }
})

/**
 *记录已抽取名字的方法 
 */
function savaName() {
    if (value != null && value != "") {
        //记录名字模板
        var nameblok = `<div class="nameblock">${value}</div>`;
        //向容器中追加名字
        $(".markNamesBox").prepend(nameblok);
        console.log($('.markNamesBox .nameblock').length)
        if($('.markNamesBox .nameblock').length>12){
            $('.markNamesBox .nameblock').eq(13).remove()
            $('.markNamesBox .nameblock').eq(12).html(`......`)
        }
    }
}

/**
 *删除所有生成的名字（清空记录）
 */
$("#clear").click(function () {
    if (!flag) {
        alert('请先停止抽奖')
        return
    }
    $(".selectNames").empty();
    ranClassNameList = JSON.parse(localStorage.getItem("ranClassNameList"));
    ranNameList = ranClassNameList[classid]
    console.log(ranClassNameList, classid)
    if (value != null && value != "") {
        //删除记录的名字
        $(".markNamesBox").empty();
        $('.randomBox .avatar').css({
            display: 'none'
        }).attr('src', './img/avatar/default.jpg')
        // $(".randomBox .name").css({color:'#fff'}).html(`猜猜谁会是天选之子？`);
         $(".randomBox .name").html(`<p>猜猜谁会是天选之子</p><img class="wenhao" src="./img/wenhao.gif" alt="">`)
       // 清除中奖效果及定时器
        clearZJ()
    } else {
        alert("无记录(已清空)!");
    }
});

//开始导入学生信息的方法
function importf(obj) {
    if (!flag) {
        alert('请先停止抽奖')
        return false
    }
    if (!obj.files) {
        return;
    }
    var f = obj.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var data = e.target.result;
        if (rABS) {
            wb = XLSX.read(btoa(fixdata(data)), { //手动转化
                type: 'base64'
            });
        } else {
            wb = XLSX.read(data, {
                type: 'binary'
            });
        }
        /**
         * wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
         * wb.Sheets[Sheet名]获取第一个Sheet的数据
         */
        classGroup = []
        ranClassNameList = []
        for (let i = 0; i < wb.SheetNames.length; i++) {
            classGroup.push(wb.SheetNames[i])
            var excelJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[i]]);
            ranClassNameList.push(excelJson)
        }
        console.log(classGroup)
        forEachClass()
        // 存缓存
        localStorage.setItem('classGroup', JSON.stringify(classGroup))
        localStorage.setItem('ranClassNameList', JSON.stringify(ranClassNameList))
        alert('导入成功并已更新浏览器缓存')
    };
    if (rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
}

//文件流转BinaryString
function fixdata(data) {
    var o = "",
        l = 0,
        w = 10240;
    for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w +

        w)));
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
    return o;
}

// 中奖效果定时器
function isMeTimer(){
    if($('.randomBox .border').css('opacity')==0){
        $('.randomBox .border').css('opacity','0.5')
        $('.randomBox .crown').css('opacity','0.9')
        $('.randomBox .shine-top').css('opacity','1')
        $('.randomBox .shine-bottom').css('opacity','1')
        // $('.randomBox .zhongjiang').css('opacity','0.6')
        // $('.randomBox .name').css('opacity','0.9')
    }else{
        $('.randomBox .border').css('opacity','0')
        $('.randomBox .crown').css('opacity','0')
        $('.randomBox .shine-top').css('opacity','0')
        $('.randomBox .shine-bottom').css('opacity','0')
        // $('.randomBox .zhongjiang').css('opacity','0')
        // $('.randomBox .name').css('opacity','0')
    }
}

// 清除中奖效果及定时器的方法
function clearZJ(){
    // 清除中奖效果及定时器
    $('.randomBox .crown').css({
        opacity: '0'
    })
    $('.randomBox .border').css({
        opacity: '0'
    })
    $('.randomBox .shine-top').css({
        opacity: '0'
    })
    $('.randomBox').css({background:'none'})
    clearInterval(zjTimer)
}